<template>
  <component
    :is="itemContent"
    v-model:items="itemValue"
    v-model:item="item"
    :index="index"
  />
</template>

<script lang="ts">
import { defineComponent, toRef } from 'vue'
import items from '@/components/RHForm/RHItem/items'

export default defineComponent({
  name: 'RHDesignerContentRight',
  props: {
    items: Array,
    index: Number
  },
  setup(props) {
    const itemValue = toRef(props, 'items')
    const itemIndex = toRef(props, 'index')
    let item:any
    let itemContent
    if (itemValue.value != null && itemIndex.value != null) {
      item = itemValue.value[itemIndex.value]
      itemContent = items.getItemDesign(item.type)
    }

    return {
      itemContent,
      itemValue,
      item
    }
  }
})
</script>

<style scoped>

</style>
